<template>
    <scroller class="scroller">
      <div class="acenter" v-if="isShow">

        <LImage class="top-image" :src="url + 'top.png'"></LImage>

        <!--打卡时间-->
        <div class="day">
          <text class="font36 text1">{{'已累计  '}}</text>
          <div class="day-frame">
            <text class="day-text">{{shi}}</text>
          </div>
          <div class="width7"></div>
          <div class="day-frame">
            <text class="day-text">{{ge}}</text>
          </div>
          <text class="font36 text1">{{'  天打卡'}}</text>
        </div>
        
        <!--打卡-->
        <div class="signin">

          <div class="signin-gifts">
            <div class="signin-gift1">
              <LImage class="signin-image" :src="url + 'bg2.png'"></LImage>
              <text class="font18 text1">{{'月度会员'}}</text>
            </div>
            <div class="signin-gift2">
              <LImage class="signin-image" :src="url + 'bg2.png'"></LImage>
              <text class="font18 text1">{{'新春盲盒'}}</text>
            </div>
            <div class="signin-gift3">
              <LImage class="signin-image" :src="url + 'bg1.png'"></LImage>
              <text class="font18 text1">{{'年度会员'}}</text>
            </div>
          </div>
          
          <div class="row">
            <text class="signin-text">{{'0天'}}</text>
            <div class="all4"></div>
            <text class="signin-text">{{'5天'}}</text>
            <div class="all4"></div>
            <text class="signin-text">{{'10天'}}</text>
            <div class="all5"></div>
            <text class="signin-text">{{'16天'}}</text>
          </div>

          <div class="signin-but-ok" v-if="todayClockIn">
            <text class="font38 text1">{{'打卡成功'}}</text>
          </div>
          <div class="signin-but" @click="httpActivityClockIn" v-else>
            <text class="font38 text1">{{'立即打卡'}}</text>
          </div>

          <div class="strip">
            <LImage class="strip-image" :src="url + 'tiao.png'"></LImage>
            <div class="strip-hui" :style="{width:getHuiWidth()+'px'}"></div>
            <LImage class="strip-gift-image" :src="url + 'lihe.png'" :style="{right:getGiftRight()}"></LImage>
          </div>
        </div>
        
        <!--提示-->
        <div class="tipe">
          <LImage class="tipe-image" :src="url + 'V.png'"></LImage>
          <text class="font28 text1">{{'累计打卡16天 即可获得年度高级会员'}}</text>
        </div>

        <!--礼品-->
        <div class="gift">
          
          <div class="gift-title">
            <LImage class="gift-wing-image" :src="url + 'wing.png'"></LImage>
            <div class="gift-title-bg">
              <text class="gift-title-text">{{'活动礼品'}}</text>
            </div>
          </div>

          <div class="gift-types">
            <div class="gift-type">
              <LImage class="gift-image" :src="url + 'denglong.png'"></LImage>
              <text class="gift-text">{{'Vtrading'}}</text>
              <text class="gift-text">{{'月度会员'}}</text>
            </div>

            <div class="gift-type">
              <LImage class="gift-image" :src="url + 'denglong.png'"></LImage>
              <text class="gift-text">{{'新春'}}</text>
              <text class="gift-text">{{'盲盒'}}</text>
            </div>

            <div class="gift-type">
              <LImage class="gift-image" :src="url + 'denglong.png'"></LImage>
              <text class="gift-text">{{'Vtrading'}}</text>
              <text class="gift-text">{{'年度会员'}}</text>
            </div>
          </div>
        </div>

        <!--规则-->
        <div class="rule">
          <text class="rule-title">{{'活动规则'}}</text>
          <div class="height36"></div>
          <text class="rule-text">{{'1、参与春节打卡，需要为实盘策略用户或活动期间新注册用户。'}}</text>
          <text class="rule-text">{{'2、打卡统计采用累积计期方式。'}}</text>
          <text class="rule-text">{{'3、活动时间：2021年2月4日-2021年2月19日。'}}</text>
          <text class="rule-text">{{'4、所有参与用户，累计打卡5天即可获赠Vtrading月度会员。'}}</text>
          <text class="rule-text">{{'5、活动结束将在累计打卡大于10天的用户中，随机抽选50名幸运用户，Vtrading将送上新春盲盒贺礼一份！'}}</text>
          <text class="rule-text">{{'6、坚持打卡16天的用户，将额外获得全勤奖励：2021年度高级会员! '}}</text>
          <text class="rule-text">{{' '}}</text>
          <text class="rule-text text-center">{{'活动最终解释权归Vtrading所有'}}</text>         
          <text class="rule-text">{{' '}}</text>
          <text class="rule-text">{{' '}}</text>
        </div>
      </div>
    </scroller>
</template>

<script>


//功能
import navigator from "@/_js/navigator"; 
import config from "@/_js/config"; 
import modal from "@/_js/modal"; 
import math from "@/_js/math"; 


import weexHttp from "@/_js/https"; ;
const weexFunction = weex.requireModule("WeexFunction");
weexFunction.setTitle('春节打卡领贺礼');

export default {

  data() {
    return {
      config:config,
      url:'https://weex.obs.cn-south-1.myhuaweicloud.com/image/active202102/',

      isShow: false,
      days:'0', //打卡天数
      shi: '-', //打卡天数十位
      ge: '-', //打卡天数个位
      todayClockIn: false, //turn今天已经打卡
    }
  },

  mounted(){

    this.httpQueryActivity();
  },

  methods:{

    //初始化数据
    initData(activityPoint) {

      this.days = activityPoint + '';
      this.shi = math.chu(this.days, '10', 0, 2);
      this.ge = math.getNumber(this.days) > 9 ? math.jian(this.days, '10', 0, 2) : this.days;
    },

    /********************************* HTTP*/
    //http活动详情
    httpQueryActivity() {

      modal.showLoad();
      var param = {'activityId':'12'};
      weexHttp.post("activity/queryActivity",param,true,(data) => {

        modal.hideLoad();
        if (data.status == 200) {
          var data = data.data;
          this.todayClockIn = data.todayClockIn;
          this.initData(data.activityPoint);
          this.isShow = true;
        } else {
          modal.toast(data.msg);
        }
      });
    },

    //http活动打卡
    httpActivityClockIn() {

      modal.showLoad();
      var param = {'activityId':'12'};
      weexHttp.postX("activity/activityClockIn",param,true,(data) => {

        modal.hideLoad();
        if (data.status == 200) {
          modal.toast('打卡成功');
          this.todayClockIn = true;
          var days = math.jia(this.days, '1', 0, 2);
          this.initData(days)
        } else {
          modal.toast(data.msg);
        }
      });
    },

    /********************************* GET*/
    //获取灰条宽
    getHuiWidth() {
      var width = math.chu(this.days, '16', 2, 2);
      width = math.cheng('624', width, 0, 2);
      width = math.jian('624', width, 0, 2);
      return width;
    },

    //获取礼物图右距离
    getGiftRight() {
      var right = math.chu(this.days, '16', 2, 2);
      right = math.cheng('624', right, 0, 2);
      right = math.jian('624', right, 0, 2);
      right = math.jian(right, '23', 0, 2);
      return Number(right);
    },

    /********************************************** 点击*/
    signinClick() {

    },
  }
}
</script>



<style src="@/_css/style.css"></style>
<style scoped>
.scroller {
  flex: 1;
  background-color: #D3101C;
}


.top-image {
  position: absolute;
  width: 750px;
  height: 952px;
}
/********************************** 打卡天数 */ 
.day {
  flex-direction: row;
  align-items: center;
  margin-top: 50px;
}
.day-frame {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 12px;
  background-color: #ffffff;
}
.day-text {
  font-size: 80px;
  font-family: DINPro;
  font-weight: 500;
  color: #FB3738;
}

/********************************** 提示 */ 
.tipe {
  position: absolute;
  flex-direction: row;
  align-items: center;
  height: 80px;
  background-image: linear-gradient(to right, #FE6A00, #FF3327);
  border-radius: 14px;

  padding-left: 37px;
  padding-right: 37px;

  top: 610px;
}
.tipe-image {
  width: 46px;
  height: 46px;
  margin-right: 8px;
}

/********************************** 打卡 */ 
.signin {
  width: 700px;
  height: 387px;
  background-color: #FFFFFF;
  border-radius: 20px;

  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 38px;
  padding-right: 38px;

  margin-top: 546px;
}
.signin-gifts {
  flex-direction: row;
  margin-bottom: 70px;
}
.signin-gift1 {
  align-items: center;
  width: 106px;
  height: 36px;
  padding-top: 4px;
  margin-left: 140px;
}
.signin-gift2 {
  align-items: center;
  width: 106px;
  height: 36px;
  padding-top: 4px;
  margin-left: 70px;
}
.signin-gift3 {
  align-items: center;
  width: 106px;
  height: 36px;
  padding-top: 4px;
  margin-left: 100px;
}
.signin-image {
  position: absolute;
  width: 106px;
  height: 36px;
  top: 0;
}
.signin-text {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.signin-but {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 88px;
  border-radius: 14px;
  background-image: linear-gradient(to right, #FE6A00, #FF3327);

  margin-top: 60px;
}
.signin-but-ok {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 88px;
  border-radius: 14px;
  background-image: linear-gradient(to right, #FD7B71, #FE9A59);

  margin-top: 60px;
}

/********************************** 进度条 */ 
.strip {
  position: absolute;
  flex-direction: row;
  align-items: center;
  width: 624px;
  height: 60px;

  top: 100;
}
.strip-image {
  position: absolute;
  width: 624px;
  height: 20px;
  border-radius: 10px;
}
.strip-hui {
  position: absolute;
  height: 20px;
  background-color: #EFEFEF;

  border-radius: 10px;

  right: 0;
}
.strip-gift-image {
  position: absolute;
  width: 47px;
  height: 53px;
}

/********************************** 礼品 */ 
.gift {
  margin-top: 54px;
  width: 650px;
}
.gift-title {
  align-items: center;
  justify-content: center;
  width: 648px;
  margin-bottom: 30px;
}
.gift-title-bg{
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 224px;
  height: 64px;
  background-color: #FF3625;
  border-radius: 32px;
}
.gift-title-text {
  font-size: 38px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFD395;
}
.gift-wing-image {
  position: absolute;
  width: 648px;
  height: 15px;
}

.gift-types {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 60px;
}
.gift-type {
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  width: 189px;
  height: 291px;

  padding-top: 80px;
}
.gift-image {
  position: absolute;
  width: 189px;
  height: 291px;
  top: 0;
}
.gift-text {
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFE276;
  line-height: 48px;
}


/********************************** 规则 */ 
.rule {
  width: 600px;
}
.rule-title {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFD395;
}
.rule-text {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFD395;
  line-height: 48px;
}
.text-center {
  text-align: center;
}

/********************************** 间距 */ 
.width7{
  width: 7;
}
.height36 {
  height: 36px;
}
</style>
